//右侧工具栏页面滚动函数
var h=function()
{
    //获取html的高度
    var html=document.querySelector('html');
var htmlwidth=html.offsetWidth;
console.log(htmlwidth);
    //右侧回到顶部
//灰色图片
var hover=document.querySelector(".hover");
//移入后出现的图片
var static=document.querySelectorAll(".static");
//右边工具栏
var right=document.querySelector(".right");
console.log(right);
//手机APP对应的li
var right1=document.querySelector(".right-1");
console.log(right1);
//手机APP出现的盒子
var phone=document.querySelector(".phone");
console.log(phone);
//解决移出li与Phone之间距离是盒子的显示
var big_phone=document.querySelector('.big-phone');
//右侧手机APP点击出现的盒子
right1.addEventListener('mouseenter',function()
{
    phone.style.display="block";
    big_phone.style.display='block';
})
right1.addEventListener('mouseleave',function()
{
    phone.style.display="none";
})
big_phone.addEventListener('mouseenter',function()
{
    phone.style.display="block";
    big_phone.style.display="block";
})
phone.addEventListener('mouseenter',function()
{
    phone.style.display="block";
})
phone.addEventListener('mouseleave',function()
{
    phone.style.display="none";
})
big_phone.addEventListener('mouseleave',function()
{
    phone.style.display="none";
})
//右侧工具栏划到一定位置出现回到顶部并固定
var gotop=document.querySelector(".go-top");
console.log(gotop);
var headerbox=document.querySelector(".header-box");
var headertop=headerbox.offsetHeight;

console.log(headertop);
document.addEventListener("scroll",function()
{
  console.log(window.pageYOffset); 
  if(window.pageYOffset>=headertop)
  {
      gotop.style.position="fixed";
      gotop.style.display="block";
 if(htmlwidth<=850)
 {
   
     right.style.top=220+'px';
 }
 else
 {
    right.style.top=110+'px';
 }
  }
  else
  {
    gotop.style.display="none";
    big_phone.style.top=200+'px';
      if(htmlwidth<=850)
      {
          right.style.top=800+'px';
      }
     else
     {
        right.style.top=200+'px';
     }
  }
})
}
window.addEventListener('load',function(){
    //右侧回到顶部的工具栏函数调用
    h();
//购物车下拉列表 
var topright1=document.querySelector('.top-right1');
var topright2=document.querySelector('.top-right2');
topright1.onmouseover=function()
{
    topright2.style.display="block";
}
topright1.onmouseout=function()
{
    topright2.style.display="none";
}
//小米logo文字跟随鼠标的移动而移动
var headerlogo=document.querySelector('.header-logo');
var logo=document.querySelector('.logo');
//鼠标移动事件
logo.addEventListener('mousemove',function(e)
{
    //获取鼠标当前的位置
    var x=e.pageX;
    var y=e.pageY;
    //把鼠标移动的距离给headerlogo位置的偏移量
    headerlogo.style.left=x+'px';
    headerlogo.style.top=y+'px';
})

//搜索框点击事件
var input=document.querySelector(".in");
var search=document.querySelector(".search");
var searchlist=document.querySelector('.search-list');
input.onfocus=function()
{
input.style.border="1px solid #FF6A00";
input.style.outline="none";
search.style.border="1px solid #FF6A00";
searchlist.style.display="block";
}

for(var i=0;i<searchlist.children.length-1;i++)
{
    //鼠标聚焦时出现的下拉列表
searchlist.children[i].onmouseout=function()
{
    
    input.style.border="1px #FF6A00 solid";
searchlist.style.display="block";
search.style.border=" 1px  #FF6A00 solid";
}
}
//失去聚焦
input.onblur=function()
{
    input.style.outline="none";
search.style.outline="none";
searchlist.style.display="none";
search.style.border="1px  #b0b0b0 solid";
input.style.border="1px  #b0b0b0 solid";

}


//手机右侧移入事件
var ul=document.querySelector(".nav2");
var li1=document.querySelectorAll(".left1");
console.log(li1);
var bannerwrapper1=document.querySelector(".bannerwrapper1");
//var nav3=document.querySelector(".nav3");
var banner=bannerwrapper1.querySelectorAll("div");
//var banner=bannerwrapper1.querySelectorAll("div");
console.log(banner);
    for(let i=0;i<li1.length;i++)
    {
      li1[i].onmouseover=function()
      {
        banner[i].style.display="block";
      }
      li1[i].onmouseout=function()
      {
        banner[i].style.display="none";
      }
    }
    
    for(var i=0;i<banner.length;i++)
    {
        banner[i].onmouseover=function()
        {
           this.style.display="block";
        }
        banner[i].onmouseout=function()
        {
            this.style.display="none";
        }
    }
//轮播图
//获取图片移动的宽度
var focus=document.querySelector(".focus");
console.log(focus);
var focusWidth=focus.offsetWidth;
console.log(focusWidth);
//获取轮播的图片
var ul=focus.querySelector("ul");
//点击的小点
var ol=focus.querySelector(".q");
var arrow_r=document.querySelector('.arrow-r');
var arrow_l=document.querySelector('.arrow-l');
for(var i=0;i<ul.children.length;i++)
{
    //动态生成小圆点
    var li=document.createElement("li");
    //给每一个小圆点添加索引号,小圆点与图片有相同的索引号
    li.setAttribute('index',i);
    //将小圆点添加到ol
    ol.appendChild(li);
    console.log(li);
    li.addEventListener('click',function(){
        console.log("ni");
        for(var i=0;i<ol.children.length;i++)
        {
            ol.children[i].className='';
            ol.children[i].style.backgroundColor="";
        }
       
      this.style.backgroundColor="white";
      this.className="current";
//获取当前图片的索引号赋值给Index,使得ul与ol中的li有相同的索引号
var index=this.getAttribute('index');
num=index;//将索引号赋值给右边点击的次数
circle=index;//
animate(ul,-index*focusWidth);
    })
}
//克隆第一张图片
var first=ul.children[0].cloneNode(true);//深度克隆
ul.appendChild(first);//将克隆图片添加到ul中
ol.children[0].style.backgroundColor="white";
//将小圆点与左右括号联系
var circle=0;
//将图片与左右括号联系
var num=0;
//右边点击事件
arrow_r.addEventListener('click',function()
{
    //当点击的次数num等于克隆图片的索引号
    if(num==ul.children.length-1)
    {
        ul.style.left=0;//将ul的左边宽度为0，从第一张开始
        num=0;//将点数的次数等于0
    }
    num++;
    circle++;
    animate(ul,-circle*focusWidth);
    if(circle==ol.children.length)
    {
        circle=0;//将点数的次数等于0
    }
    for(var i=0;i<ol.children.length;i++)
    {
        ol.children[i].style.backgroundColor="";
    }
    ol.children[circle].style.backgroundColor="white";
})
//左边点击事件
arrow_l.addEventListener('click',function(){
    //当左边点击到第一张时，就把ul的位置设为最后一张图片
    if(num==0)
    {
        ul.style.left=-(ul.children.length-1)*focusWidth;//index为最后一张图片的索引号
        num=ul.children.length-1;
    }
    num--;
    circle--;
    if(circle<0)
    {
        circle=ol.children.length-1;//j将最后一个小圆点的索引号付给circle
    }
    animate(ul,-num*focusWidth);
//排他思想
for(var i=0;i<ol.children.length;i++)
{
    ol.children[i].style.backgroundColor='';

}
ol.children[circle].style.backgroundColor="white";
})

//自动轮播
var timer=this.setInterval(function()
{
    arrow_r.click();
},5000)
focus.addEventListener('mouseenter',function()
{
    clearInterval(timer);
    timer=null;
})
focus.addEventListener('mouseleave',function()
{
    timer=setInterval(function()
    {
        arrow_r.click();
    },5000)
})

//热门与穿戴的鼠标移入事件
// var wears2=document.querySelector(".wear-s2");
var wear_nav1=document.querySelector('.wear-nav1');
//热门和穿戴
var wear_li=wear_nav1.querySelectorAll("li");
//文字
var wear_s=wear_nav1.querySelectorAll('span');
//下划线
var underline=wear_nav1.querySelectorAll('.underline');
console.log(wear_s);
//热门与穿戴对应的下面的两个盒子
var wear_ul1=document.querySelector('.wear-nav2');
var wear_ul2=document.querySelector('.wear-nav3')
wear_li[0].onmouseover=function(){
wear_s[0].style.color="#FF6A00";
wear_s[1].style.color="black";
underline[0].style.display="block";
underline[1].style.display="none";
wear_ul1.style.display="block";
wear_ul2.style.display="none";
}
wear_li[1].onmouseover=function(){
    wear_s[1].style.color="#FF6A00";
    wear_s[0].style.color="black";
    underline[1].style.display="block";
    underline[0].style.display="none";
    wear_ul2.style.display="block";
    wear_ul1.style.display="none";
    }
//下面小图片的轮播
var last=document.querySelector('.last-box1');
var last_ul=document.querySelector('.last-box1-nav');
var lastwidth=last.offsetWidth;
console.log(lastwidth);
var index=0;
function a()
{
    var first=last_ul.children[0].cloneNode(true);
    console.log(first);
    last_ul.appendChild(first);
    index++;
    animate(last_ul,-index*lastwidth);  
    console.log(index*lastwidth);
    if(index==2)
    {
        console.log(last_ul.children.length-1);
        last_ul.style.left=0;
        index=0;
    }
}
var time=this.setInterval(function()
{
   a();
  
},2000)
})
window.addEventListener('resize',function()
{
   h();
  
})